<template>
  <view class="search-page">
    <!-- 自定义导航栏 -->
    <up-navbar 
      title="搜索" 
      :bgColor="'#fff'" 
      height="50" 
      fixed 
      placeholder
      :leftIconColor="'#333'"
      @leftClick="handleBack"
    >
      <template #left>
        <up-icon name="arrow-left" color="#333" size="18"></up-icon>
      </template>
    </up-navbar>

    <view class="content">
      <!-- 搜索框 -->
      <view class="search-section">
        <up-search placeholder="搜索虚拟展馆名称、主题" shape="square" v-model="searchKeyword" :clearabled="true" @search="handleSearch" @custom="handleSearch"/>
      </view>

      <!-- 搜索历史 -->
      <view class="search-history" v-if="searchHistory.length > 0 && !searchResults.length">
        <view class="section-header">
          <text class="section-title">搜索历史</text>
          <up-icon name="trash" color="#999" size="16" @click="clearSearchHistory"></up-icon>
        </view>
        <view class="history-tags">
          <view 
            class="history-tag" 
            v-for="(item, index) in searchHistory" 
            :key="index"
            @click="searchFromHistory(item)"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 热搜榜 -->
      <view class="hot-search" v-if="!searchResults.length">
        <view class="section-header">
          <text class="section-title">热搜榜</text>
        </view>
        <view class="hot-list">
          <view 
            class="hot-item" 
            v-for="(item, index) in hotSearchList" 
            :key="index"
            @click="searchFromHistory(item.keyword)"
          >
            <view class="hot-rank" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</view>
            <image :src="item.image" class="hot-image" mode="aspectFill"></image>
            <view class="hot-content">
              <text class="hot-keyword">{{ item.keyword }}</text>
              <text class="hot-count">{{ item.count }}人搜索</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 搜索结果 -->
      <view class="search-results" v-if="searchResults.length > 0">
        <view class="result-header">
          <text class="result-count">找到{{ searchResults.length }}个相关作品</text>
          <text class="clear-results" @click="clearResults">清空</text>
        </view>
        <view class="artwork-list">
          <view 
            v-for="(item, index) in searchResults" 
            :key="index" 
            class="artwork-card"
            @click="goToArtworkDetail(item)"
          >
            <image :src="item.image" class="artwork-image" mode="aspectFill"></image>
            <view class="artwork-info">
              <text class="artwork-title">{{ item.title }}</text>
              <text class="artwork-artist">{{ item.artist }}</text>
              <view class="artwork-meta">
                <text class="artwork-date">{{ item.date }}</text>
                <view class="artwork-stats">
                  <view class="stat-item">
                    <up-icon name="eye" color="#999" size="12"></up-icon>
                    <text class="stat-text">{{ item.views }}</text>
                  </view>
                  <view class="stat-item">
                    <up-icon name="heart" color="#999" size="12"></up-icon>
                    <text class="stat-text">{{ item.likes }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const searchKeyword = ref('')
const searchHistory = ref([])
const searchResults = ref([])

// 热搜榜数据
const hotSearchList = reactive([
  { 
    keyword: '兰亭序', 
    count: 12800,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '祭侄文稿', 
    count: 9600,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '黄州寒食诗帖', 
    count: 8400,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '蜀素帖', 
    count: 7200,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '多宝塔碑', 
    count: 8900,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '九成宫醴泉铭', 
    count: 7800,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '自叙帖', 
    count: 9200,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  { 
    keyword: '古诗四帖', 
    count: 6500,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  }
])

// 模拟作品数据
const artworks = reactive([
  {
    id: 1,
    title: '兰亭序',
    artist: '王羲之',
    date: '东晋',
    views: 12800,
    likes: 856,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 2,
    title: '祭侄文稿',
    artist: '颜真卿',
    date: '唐代',
    views: 9600,
    likes: 724,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 3,
    title: '黄州寒食诗帖',
    artist: '苏轼',
    date: '宋代',
    views: 8400,
    likes: 652,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 4,
    title: '蜀素帖',
    artist: '米芾',
    date: '宋代',
    views: 7200,
    likes: 589,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 5,
    title: '多宝塔碑',
    artist: '颜真卿',
    date: '唐代',
    views: 8900,
    likes: 621,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 6,
    title: '九成宫醴泉铭',
    artist: '欧阳询',
    date: '唐代',
    views: 7800,
    likes: 543,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 7,
    title: '自叙帖',
    artist: '怀素',
    date: '唐代',
    views: 9200,
    likes: 687,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  },
  {
    id: 8,
    title: '古诗四帖',
    artist: '张旭',
    date: '唐代',
    views: 6500,
    likes: 421,
    image: 'https://cdn.vxexpo.com/58d5bc94b9dc12f9341ea979c4a862ce1b98a83a/19214/12102/textures/98bf328cce8d2ddc167dc09be1de8561.jpg'
  }
])

// 页面加载时获取搜索历史
onLoad(() => {
  // 从本地存储获取搜索历史
  const history = uni.getStorageSync('searchHistory')
  if (history) {
    searchHistory.value = history
  }
})

// 返回上一页
const handleBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}

// 处理搜索
const handleSearch = () => {
  if (!searchKeyword.value.trim()) {
    uni.showToast({
      title: '请输入搜索关键词',
      icon: 'none'
    })
    return
  }
  
  // 添加到搜索历史
  addToSearchHistory(searchKeyword.value)
  
  // 执行搜索
  performSearch(searchKeyword.value)
}

// 从历史记录搜索
const searchFromHistory = (keyword) => {
  searchKeyword.value = keyword
  performSearch(keyword)
}

// 执行搜索逻辑
const performSearch = (keyword) => {
  // 模拟搜索结果
  const results = artworks.filter(item => 
    item.title.includes(keyword) || 
    item.artist.includes(keyword)
  )
  
  searchResults.value = results
  
  if (results.length === 0) {
    uni.showToast({
      title: '未找到相关作品',
      icon: 'none'
    })
  }
}

// 添加搜索历史
const addToSearchHistory = (keyword) => {
  // 如果已存在，则移到最前面
  const index = searchHistory.value.indexOf(keyword)
  if (index > -1) {
    searchHistory.value.splice(index, 1)
  }
  
  searchHistory.value.unshift(keyword)
  
  // 限制历史记录数量
  if (searchHistory.value.length > 10) {
    searchHistory.value.pop()
  }
  
  // 保存到本地存储
  uni.setStorageSync('searchHistory', searchHistory.value)
}

// 清空搜索历史
const clearSearchHistory = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空搜索历史吗？',
    success: (res) => {
      if (res.confirm) {
        searchHistory.value = []
        uni.removeStorageSync('searchHistory')
      }
    }
  })
}

// 清空搜索结果
const clearResults = () => {
  searchResults.value = []
  searchKeyword.value = ''
}

// 跳转到作品详情
const goToArtworkDetail = (artwork) => {
  uni.navigateTo({
    url: `/gallery_pages/artwork/detail?id=${artwork.id}`
  })
}
</script>

<style lang="scss" scoped>
.search-page {
  min-height: 100vh;
  background: #f5f6fa;
}

.content {
  padding: 20rpx 30rpx;
}

.search-section {
  margin-bottom: 30rpx;
  
  :deep(.up-input) {
    background: #fff;
    border-radius: 50rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .history-tag {
    padding: 12rpx 24rpx;
    background: #f8f9fa;
    border-radius: 24rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.hot-list {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  
  .hot-item {
    display: flex;
    align-items: center;
    padding: 24rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .hot-rank {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #999;
      margin-right: 20rpx;
      
      &.top-three {
        color: #ff6b6b;
        font-weight: 600;
      }
    }
    
    .hot-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }
    
    .hot-content {
      flex: 1;
      
      .hot-keyword {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .hot-count {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .result-count {
    font-size: 28rpx;
    color: #666;
  }
  
  .clear-results {
    font-size: 26rpx;
    color: #4ecdc4;
  }
}

.artwork-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.artwork-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.artwork-image {
  width: 100%;
  height: 300rpx;
}

.artwork-info {
  padding: 24rpx;
  
  .artwork-title {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .artwork-artist {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
  
  .artwork-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .artwork-date {
      font-size: 24rpx;
      color: #999;
    }
    
    .artwork-stats {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 6rpx;
        
        .stat-text {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}
</style>